<template>
    <div class="container banner__wrapper">
        <div class="banner__upper">
            <span class="banner__label">About Us</span>
            <h1 class="banner__title">Milestone</h1>
        </div>

    </div>

    <div class="container padding--l">
        <div class="milestones">
            <ul class="milestones__list col-9">
                <li class="milestones__item lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2012</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">墨西哥和越南新生产设施</h3> -->
                            
                            <ul class="milestones__facts">
                                <li>
                                <p>
                                    Dedahaikang Livestock Machinery Co., Ltd. was registered and established. The factory covers an area of     less than 400 square meters.
                                </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--right entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2013-2015</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">在中国广州启动第四工厂</h3> -->

                            <ul class="milestones__facts">
                                <li>The largest high-pressure fogging system for a single pig farming project in China to date has been delivered,which covered an area of 306 hm² and was equipped with a high-pressure fogging system throughout.</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2016</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">通过第三家生产设施的设立以扩大我们的制造产能</h3> -->

                            <ul class="milestones__facts">
                                <li>The first set of high-pressure hot water cleaning system independently assembled by a Chinese company was delivered.The factory area has been expanded to 1,350 square meters.</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--right entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2017-2018</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">对新设备的重大投资</h3> -->

                            <ul class="milestones__facts">
                                <li>Traveled to various countries including Germany,France,ltaly,the Netherlands,the UnitedStates and Japan to make preparatory work for setting up branches abroad</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2019</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">实施制造数据分析</h3> -->

                            <ul class="milestones__facts">
                                <li>The overall development model of comprehensively learning from Japanese enterprises was determined.On December 26,2019,Deda Trading Co., Ltd. was established in Osaka.</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--right entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2020</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">成立第二家工厂</h3> -->

                            <ul class="milestones__facts">
                                <li>Launched the Vehicle drying system based on the original imported products from the United
States.The Jiaozhou factory has been put into use,covering an area of 4,000 square meters.</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2021</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">最终实现数字化</h3> -->

                            <ul class="milestones__facts">
                                <li>Purchased 6 AMADA sheet metal processing machines from Japan.</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--right entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2022</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">迈进智能工厂时代</h3> -->

                            <ul class="milestones__facts">
                                <li>Add sandblasting and painting booth equipment.</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2023</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">成长和实时质量监控</h3> -->

                            <ul class="milestones__facts">
                                <li>Purchased one 3KW laser cutting machine.</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="milestones__item lazy come-in--right entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="milestones__item-card">
                        <div class="milestones__date">
                            <time class="milestone__year">2025</time>
                        </div>
                        <div class="milestones__content">
                            <!-- <h3 class="milestones__description">迁至更大的制造工厂</h3> -->

                            <ul class="milestones__facts">
                                <!-- <li>All workshops are equipped with AC.A comfortable working environment has been provided for employees.</li> -->
                                <li>
                                    All workshops are equipped with AC.A comfortableworking environment has been provided for
employees.We have also purchased MURATEC Servo motor-driven Press Brake 36T from Japan.
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</template>   

<style lang="less">
.banner__label{
    // color:#004d7b;
}
.milestones__list:before{

    height:110%;
}

.milestones__item-card {

    box-shadow: none;
}

.milestones__item :after,
.milestones__item :before {
    content: "";
    position: absolute;
    background-color: #004d7b;
}

.milestones__item :before {
    width: 100%;
    height: 5px;
    //top: 2rem;
    top: 6rem;
}

.milestones__item :after {

    //top: 1rem;
    top: 5rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: .4rem solid #004d7b;
    z-index: 1;

    background-color: #FAC42C;
}

.milestones__facts {
    margin-top: 30px;
    line-height:1.5;
    font-size:1.6rem;
}
.milestones__date{

    font-weight:bold;
    color:#004d7b;

}

.milestones__item:nth-child(odd){

    .milestones__item-card{
        .milestones__date{
            text-align:right;
        }
    }

}
</style>